<!--form表单的开关组件-->
<template>
  <div>
    <!-- <el-form-item :label="config.label" :label-width="config.labelW" :rules="config.rules" :class="config.formItemClass" :prop="config.name" :style="config.formItemStyle || {}"> -->
    <el-switch :size="config.size" v-model="form.data.switch" :disabled="disabled" :class="config.childClass" :active-text="showName" :active-color="config.acttiveColor || '#13ce66'" :inactive-color="config.inactiveColor || '#DCDFE6'" :style="config.childStyle || {width: '46px'}" />
    <slot name="other" ></slot>
  <!-- </el-form-item> -->
  </div>
</template>

<script>
export default {
  name: 'FormSwitch',
  props: {
    // 是否可编辑
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    config: {
      type: Object,
      required: false,
      default: () => {
        return {
          label: '开关',
          name: 'switch',
          acttiveColor: '#13ce66', // switch 打开时的背景色
          inactiveColor: '#ff4949', // switch 关闭时的背景色
          activeText: ['是', '否'],
          data: {
            true: '1',
            false: '0'
          }
        }
      }
    },
    // 组件循环时需要的idx值
    idx: {
      type: [Number, String],
      default: 0
    },
    data: {
      type: [String, Number, Boolean],
      required: false,
      default: ''
    }
  },
  data () {
    return {
      form: {
        data: {
          switch: true
        }
      }
    }
  },
  computed: {
    switchData () {
      let obj = {}
      if (!this.$validate.isNull(this.config.data)) {
        // debugger
        obj = this.config.data
      } else {
        // debugger
        // const arr = this.$constant.enabledArr
        this.$constant.enabledArr.forEach(item => {
          item.value === 0 ? (obj.false = 0) : (obj.true = 1)
        })
      }
      return obj
    },
    showName () {
      const arr = this.$constant.enabledArr
      let text0 = arr[0].label
      let text1 = arr[1].label
      // debugger
      if (!this.$validate.isNull(this.config.activeText)) {
        text0 = this.config.activeText[0]
        text1 = this.config.activeText[1]
      }
      return this.form.data.switch ? text1 : text0
    }
  },
  watch: {
    data: {
      handler (val) {
        // debugger
        if (this.switchData.true === val) {
          this.form.data.switch = true
        } else {
          this.form.data.switch = false
        }
      },
      deep: true, // 对对象进行深入监听，数组不需要深度监听
      immediate: true // 最初绑定值也执行函数
    },
    form: {
      handler (val) {
        // debugger
        let value = ''
        if (this.form.data.switch) {
          value = this.switchData.true
        } else {
          value = this.switchData.false
        }
        this.$emit('updateForm', '' + this.config.name, value, this.idx, this.config)
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .search-box {
  width: 100%;
}
/deep/ .el-switch {
  position: relative;
  height: 24px;
  line-height: 24px;
  &.is-checked {
    .el-switch__core {
      background: #179bff;
      &:after {
        margin-left: -22px;
      }
    }
  }
  .el-switch__label,
  .el-switch__core {
    height: 24px;
  }
  .el-switch__core {
    width: 100% !important;
    border-radius: 12px;
    border: none;
    background: #f1f1f1;
    &:after {
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3);
      width: 22px;
      height: 22px;
    }
  }
  .el-switch__label.is-active {
    color: #333;
  }
  .el-switch__label--right {
    margin-left: 0px;
    &.is-active {
      color: #fff;
      left: 7px;
    }
    position: absolute;
    right: 7px;
    top: -1px;
    color: #999;
    > span {
      font-size: 12px;
    }
  }
}
</style>
